<template>
    <transition name="dialog-fade">
        <div class="transfer" v-show="visible">
            <div class="rel">
                <div class="mask"></div>
                <div class="transfer-box">
                    <div class="transfer-box__head">
                        <span>选择签到对象</span>
                        <a href="javascript:;" @click="close()" class="close icon-guanbi"></a>
                    </div>
                    <div class="transfer-box__main">

                        <div class="transfer-box__main--left">

                            <!--<div class="transfer-box__main&#45;&#45;lsearch">-->
                                <!--<input type="text" placeholder="搜索人员或部门">-->
                                <!--<button>-->
                                    <!--<span class="icon-sousuo"></span>-->
                                <!--</button>-->
                            <!--</div>-->

                            <div class="transfer-box__main--box ">
                                <div class="title">签到对象</div>
                                <div class="scrollbar">
                                    <div class="tree-item" v-for="it in group" :key="it.uuid">
                                        <div class="tree-item-top" :data-id="it.uuid" @click="copy(it)">{{it.groupName}}</div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="transfer-box__main--right">
                            <div class="transfer-box__main--rhead">
                                <span>已选择 <em>{{groupSelect.length}}</em> / {{limit}} 个</span>
                                <a href="javascript:;" @click="clear()">全部清空</a>
                            </div>

                            <div class="scrollbar">

                                <div class="tree-item" v-for="it in groupSelect">
                                    <div class="tree-item-top">
                                        {{it.groupName}}
                                        <a href="javascript:;" class="del">
                                            <span class="icon-guanbi"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="transfer-footer">
                        <a href="javascript:;" @click="enter()" class="enter">确定</a>
                        <a href="javascript:;" @click="close()" class="chancle">取消</a>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        data() {
            return {
                visible     : false,
                title       : '',
                groupSelect : [],
                limit       : 5,
                search      : false
            }
        },

        methods : {
            copy (item) {
                if(this.groupSelect.indexOf(item) !== -1) return ;
                if(this.groupSelect.length >= this.limit) return ;
                this.groupSelect.push(item);
            },
            clear () {
                this.groupSelect = [];
            }
        }

    }
</script>